<template>
  <a-modal
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    class="banner"
    @cancel="handleCancel"
    cancelText="关闭"
    footer
    style="color: rgb(138, 223, 252);"
    :closable="false"
  >  <a-spin :spinning="confirmLoading" class="top">
      <a-form :form="form">
        <a-row class="topbannner" :style="topbannner">
          <a-col :span="1"></a-col>

          <a-col :span="3" class="tital">手术编码维护</a-col>
          <a-col :span="19"></a-col>
          <a-col :span="1" @click="big" v-if="showbig" style="color: #38c3c8;line-height: 42px;">
            <img src="../../../assets/images/fangda.png" style="width: 20px;" />
          </a-col>
          <a-col :span="1" @click="big" v-if="!showbig" style="color: #38c3c8;line-height: 42px;">
            <img src="../../../assets/images/suoxiao.png" style="width: 20px;" />
          </a-col>
        </a-row>
        <a-row class="everyrow" :style="lsstyle">
          <a-col :span="1"></a-col>
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="请选择药品分类">
              <a-select placeholder="请选择药品分类" v-decorator="['drugType',{rules:[{required: true,message:'请选择药品分类'}]}]">
                <a-select-option value="西药">西药</a-select-option>
                <a-select-option value="中药">中药</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="分类名称">
              <a-input placeholder="请输入分类名称" v-decorator="['oneTypeName', {rules:[{required: true,message:'请输入分类名称'}]}]" />
            </a-form-item>
          </a-col>
        </a-row>
        
      </a-form>
      <a-tabs v-model="activeKey" @change="handleChangeTabs">
        <a-tab-pane tab="药品信息二级分类表" :key="refKeys[0]" :forceRender="true">
          <j-editable-table
            :ref="refKeys[0]"
            :loading="knoDrugTwoTypeTable.loading"
            :columns="knoDrugTwoTypeTable.columns"
            :dataSource="knoDrugTwoTypeTable.dataSource"
            :maxHeight="300"
            :rowNumber="true"
            :rowSelection="true"
            :actionButton="true"
          />
        </a-tab-pane>
        <a-tab-pane style="display: none;" tab="" :key="refKeys[1]" :forceRender="true">
          <j-editable-table
            :ref="refKeys[1]"
            :loading="knoDrugInfAttTable.loading"
            :columns="knoDrugInfAttTable.columns"
            :dataSource="knoDrugInfAttTable.dataSource"
            :maxHeight="300"
            :rowNumber="true"
            :rowSelection="true"
            :actionButton="true"
          />
        </a-tab-pane>
      </a-tabs>
      <div class="btn-out">
          <a-row>
            <a-col :span="19"></a-col>
            <button class="btn" @click="handleOk">保存</button>
            <button class="btn btn1" @click="handleCancel">取消</button>
          </a-row>
        </div>
    </a-spin>
  </a-modal>
</template>

<script>
import moment from 'moment'
import pick from 'lodash.pick'
import { FormTypes } from '@/utils/JEditableTableUtil'
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
import { getAction } from '@/api/manage'

export default {
  name: 'KnoDrugInfOwnerModal',
  mixins: [JEditableTableMixin],
  data() {
    return {
      // 新增时子表默认添加几行空数据
      addDefaultRowNum: 1,
      bodyinner: true,
      showbig: true,
      visible: false,
      topbannner: {},
      lsstyle: {},
      validatorRules: {},
      refKeys: ['knoDrugTwoType', 'knoDrugInfAtt'],
      activeKey: 'knoDrugTwoType',
      dataSourceye: [],
      // 药品信息二级分类表
      knoDrugTwoTypeTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '二级药品名称',
            key: 'twoTypeName',
            type: FormTypes.input,
            defaultValue: '',
            placeholder: '请输入${title}'
          },
        ]
      },
      // 药品信息子表
      knoDrugInfAttTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: 'drugsGenName',
            key: 'drugsGenName',
            type: FormTypes.input,
            defaultValue: '',
            placeholder: '请输入${title}'
          },
          {
            title: 'drugsEngName',
            key: 'drugsEngName',
            type: FormTypes.input,
            defaultValue: '',
            placeholder: '请输入${title}'
          },
          {
            title: 'drugsPinyin',
            key: 'drugsPinyin',
            type: FormTypes.input,
            defaultValue: '',
            placeholder: '请输入${title}'
          },
          {
            title: 'drugCom',
            key: 'drugCom',
            type: FormTypes.input,
            defaultValue: '',
            placeholder: '请输入${title}'
          },
          {
            title: 'drugPro',
            key: 'drugPro',
            type: FormTypes.input,
            defaultValue: '',
            placeholder: '请输入${title}'
          },
          {
            title: 'applicable',
            key: 'applicable',
            type: FormTypes.input,
            defaultValue: '',
            placeholder: '请输入${title}'
          },
          {
            title: 'specs',
            key: 'specs',
            type: FormTypes.input,
            defaultValue: '',
            placeholder: '请输入${title}'
          },
          {
            title: 'usageDosage',
            key: 'usageDosage',
            type: FormTypes.input,
            defaultValue: '',
            placeholder: '请输入${title}'
          },
          {
            title: 'adverseReactions',
            key: 'adverseReactions',
            type: FormTypes.input,
            defaultValue: '',
            placeholder: '请输入${title}'
          },
          {
            title: 'taboo',
            key: 'taboo',
            type: FormTypes.input,
            defaultValue: '',
            placeholder: '请输入${title}'
          },
          {
            title: 'carefulMatter',
            key: 'carefulMatter',
            type: FormTypes.input,
            defaultValue: '',
            placeholder: '请输入${title}'
          },
          {
            title: 'interation',
            key: 'interation',
            type: FormTypes.input,
            defaultValue: '',
            placeholder: '请输入${title}'
          },
          {
            title: 'drugsOverdose',
            key: 'drugsOverdose',
            type: FormTypes.input,
            defaultValue: '',
            placeholder: '请输入${title}'
          },
          {
            title: 'sto',
            key: 'sto',
            type: FormTypes.input,
            defaultValue: '',
            placeholder: '请输入${title}'
          },
          {
            title: 'packing',
            key: 'packing',
            type: FormTypes.input,
            defaultValue: '',
            placeholder: '请输入${title}'
          },
          {
            title: 'validityTerm',
            key: 'validityTerm',
            type: FormTypes.input,
            defaultValue: '',
            placeholder: '请输入${title}'
          },
          {
            title: 'executeStandard',
            key: 'executeStandard',
            type: FormTypes.input,
            defaultValue: '',
            placeholder: '请输入${title}'
          },
          {
            title: 'approvalNumber',
            key: 'approvalNumber',
            type: FormTypes.input,
            defaultValue: '',
            placeholder: '请输入${title}'
          },
          {
            title: 'companyName',
            key: 'companyName',
            type: FormTypes.input,
            defaultValue: '',
            placeholder: '请输入${title}'
          },
          {
            title: 'operator',
            key: 'operator',
            type: FormTypes.input,
            defaultValue: '',
            placeholder: '请输入${title}'
          },
          {
            title: '1:新增2:修改3:删除',
            key: 'opeType',
            type: FormTypes.inputNumber,
            defaultValue: '',
            placeholder: '请输入${title}'
          },
        ]
      },
      url: {
        list: '/knowledge/knoCgOwner/getDepAll',
        add: '/knowledge/knoDrugInfOwner/add',
        edit: '/knowledge/knoDrugInfOwner/edit',
        knoDrugTwoType: {
          list: '/knowledge/knoDrugInfOwner/queryKnoDrugTwoTypeByMainId'
        },
        knoDrugInfAtt: {
          list: '/knowledge/knoDrugInfOwner/queryKnoDrugInfAttByMainId'
        }
      }
    }
  },
  created() {
    getAction(this.url.list).then(res => {
      if (res.success) {
        this.dataSourceye = res.result
      }
      if (res.code === 510) {
        this.$message.warning(res.message)
      }
      this.loading = false
    })
  },
  methods: {
    big() {
      this.showbig = !this.showbig
      if (this.showbig) {
        document.querySelector('.btn-out').style.marginTop = '0px'
        document.querySelector('.banner').style.width = '800px'
        this.lsstyle = { 'margin-top': '-15px' }
      } else {
        document.querySelector('.banner').style.width = '100%'
        document.querySelector('.btn-out').style.width = '100%'
        document.querySelector('.btn-out').style.marginTop = '30px'
        // document.querySelector('.everyrow').style = '30px'
        this.lsstyle = { 'margin-top': '20px' }
        this.topbannner = { width: '100%', 'margin-bottom': '50px' }
      }
    },
    /** 调用完edit()方法之后会自动调用此方法 */
    editAfter() {
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'drugType', 'oneTypeName'));
        // 时间格式化
        this.form.setFieldsValue({ opeDate: this.model.opeDate ? moment(this.model.opeDate) : null })
      })
      // 加载子表数据
      if (this.model.id) {
        let params = { id: this.model.id }
        this.requestSubTableData(this.url.knoDrugTwoType.list, params, this.knoDrugTwoTypeTable)
        // this.requestSubTableData(this.url.knoDrugInfAtt.list, params, this.knoDrugInfAttTable)
      }
    },

    /** 整理成formData */
    classifyIntoFormData(allValues) {
      let main = Object.assign(this.model, allValues.formValue)
      //时间格式化
      // main.opeDate = main.opeDate ? main.opeDate.format('YYYY-MM-DD HH:mm:ss') : null
      return {
        ...main, // 展开
        knoDrugTwoTypeList: allValues.tablesValue[0].values,
        knoDrugInfAttList: allValues.tablesValue[1].values
      }
    }
  }
}
</script>

<style scoped lang="less">
@import '~@assets/less/zkxhadd.less';

</style>